<template>
    <view class="apply-wrapper">

        <view class="card-form">
            <view class="card-title">提现金额</view>
            <view style="display: flex;" class="input-box">
                <view>￥</view>
                <view><input maxlength="8" class="card-input" type="number" v-model="withDraw.money"></view>
            </view>

            <view class="sxf">
                <view class="l">
                    <view>手续费</view>
                    <view class="bg">
                        <img src="@/assets/images/icon-share.png" alt="">
                        <text class="text">邀请好友手续费减免</text>
                    </view>
                </view>
                <view class="r">
                    ￥3 + 1%
                </view>

            </view>
            <view class="tips" style="text-align: center;color: #B6B6B6;margin-top: 34rpx;">转账每笔三元银行收，手续费含税</view>
        </view>
        <view class="btn" style="margin-top: 56rpx;">
            <Button @click="success">申请提现</Button>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, onUnmounted } from 'vue';
import Button from '@/components/Button.vue'
import {useRouter,useRoute} from 'vue-router'
import api from '@/apis/api';
import {http} from "../../../apis/request";
import {result} from "lodash-es";
import { showToast } from '@/utils/prompt';

let withDraw = reactive({
  bankCardNum: '',
  bankName: '',
  money: null,
})

onMounted(() => {
  const route=useRoute()
  withDraw.bankCardNum=route.query.bankCardNum,
  withDraw.bankName=route.query.bankName,
  withDraw.money=route.query.money
})

onUnmounted(() => {

})
function success(){
    const  promise = new Promise((resolve, reject) =>{
        const data = api.applyWithDraw(withDraw);
        resolve(data)
    })
    promise.then(data =>{
        if(data.code==100){
            showToast("您输入的金额大于钱包余额");
            return;
        }else {
            showToast("申请成功，请等待审核");
            uni.reLaunch({
                url:'/pages/user/index/index'
            })
        }
    })
}

</script>

<style lang="scss" scoped>
page{
    background: #f9f9f9;
}

.apply-wrapper{
    padding: 0 30rpx;
    padding-top: 40rpx;
    font-family: PingFang SC Bold;
    .sxf{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 26rpx;
        .l{
            display: flex;
        align-items: center;
            .bg{
                background: linear-gradient(90deg, #A27B5C 0%, #DEBD9C 123%);
                display: flex;
                padding: 16rpx;
                margin-left: 24rpx;
                align-items: center;
                border-radius: 8rpx;
                img{
                    width: 30rpx;
                    height: 30rpx;
                }
                .text{
                    color: #fff;
                    margin-left: 10rpx;
                }

            }
        }

        .r{
            color: #FD6564;
        }
    }
    .card-form{
        background: #fff;
        border-radius: 30rpx;
        height: 370rpx;
        padding: 0 30rpx;
        padding-top: 48rpx;

        .card-title{
            color: #333333;
            font-size: 28rpx;
        }
        .input-box{
            font-size: 48rpx;
            align-items: center;
            position: relative;
            height: 65px;
            border-bottom: 2rpx solid #EBEBEB;

            .card-input{
                font-size: 48rpx;
                text-indent: 20rpx;
            }
        }

    }
}
</style>
